@include('common.header')
<link rel="stylesheet" href="{{ asset('/css/list.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/box.css') }}" />
<link rel="stylesheet" href="{{ asset('/css/style.css') }}">
<link rel="stylesheet" href="{{ asset('/css/tip/demo.css') }}">
<style type="text/css" >

	.bmbox
	{
		width:150px;
		height:100px;
		background:#F5F5F5; 
		color:#FF0000;
		position:absolute; 
		margin-top:-100px;
		display:block;
		font:30px/20px "宋体"; 
		font-weight:bold;
		text-align:center;
		padding-top:35px;
		filter:alpha(Opacity=80);-moz-opacity:0.6;opacity: 0.6;

	}
</style>
<script type="text/javascript" >
	
	// 批量删除
	function all_del()
	{
		var all	 =	[];
		var key	 =	0;
		$(".group1 :checkbox:checked").each(function()
		{
			// 遍历 获取每个选中框的 sku
			var sku = $(this).val();
			++key;
			all[key] = sku ;
		});
		if( key==0 )
		{
			$(".opa").html('没有要删除的sku');
			$(".opa").slideDown(1000);
			$(".opa").delay(1500).slideUp(1000);
			return false;
		}
		if( confirm('确定要删除这些sku吗？') )
		{
			$.ajax({
				type:"post",
				url:"{{ url('/delSkuAll') }}",
				data:{all:all,_token:_token},
				async:true,    					
				dataType:"json",
				success:function(back)
				{
					if( back['show_info'].indexOf("成功") > 0 )
					{
						$(".opa").html(back['show_info']);
						$(".opa").slideDown(1000);
						$(".opa").delay(1500).slideUp(1000);
						setTimeout(function(){
							window.location.href="{{ url('/sku') }}";
						},2000);
					}else
					{
						$(".opa").html(back['show_info']);
						$(".opa").slideDown(1000);
						$(".opa").delay(1500).slideUp(1000);
					}
					
				}
			});
		}
	}
	
	
	
	// 点击浏览时 设置好相关信息
	function rizhi( sku,skuName )
	{
		// 标题
		$("#rizhiModalLabel").html("sku : "+skuName);
		// 获取记录
		$.ajax({
			type:"post",
			url:"{{ url('/getSkuLog') }}",
			data:{sku:sku,_token:_token},
			async:true,    					
			dataType:"html",
			success:function(back)
			{
				$("#modal-body").html('');
				$("#modal-body").append(back);
			}
		});
	}
	
	
	// 批量修改 商品状态
	function all_status( status )
	{
		
		var all	 =	[];
		var key	 =	0;
		$(".group1 :checkbox:checked").each(function()
		{
			// 遍历 获取每个选中框的 sku
			var sku = $(this).val();
			++key;
			all[key] = sku ;
		});
		if( key==0 )
		{
			$(".opa").html('没有要操作的sku');
			$(".opa").slideDown(1000);
			$(".opa").delay(1500).slideUp(1000);
			return false;
		}
		if( confirm('确定要操作这些sku吗？') )
		{
			$.ajax({
				type:"post",
				url:"{{ url('/upSkuStatus') }}",
				data:{all:all,status:status,_token:_token},
				async:true,    					
				dataType:"json",
				success:function(back)
				{
					// 返回 String 对象内第一次出现子字符串的字符位置
					if( back['show_info'].indexOf("成功") > 0 )
					{
						$(".opa").html(back['show_info']);
						$(".opa").slideDown(1000);
						$(".opa").delay(1500).slideUp(1000);
						setTimeout(function(){
							window.location.href="{{ url('/sku') }}";
						},2000);
					}else
					{
						$(".opa").html(back['show_info']);
						$(".opa").slideDown(1000);
						$(".opa").delay(1500).slideUp(1000);
					}
					
				}
			});
		}
	}
	
</script>


<!-- 商品搜索 -->
<div class="row" style="width:100%;margin-top:5%;" >
	<div class="col-md-4" >
		<nav style="margin-right:-100px;">
			<ol class="cd-breadcrumb custom-separator custom-icons" style="width:230px;" >
				<li><a href="{{ url('/') }}">首页</a></li>
				<li class="current"><a href="{{ url('/sku') }}">sku列表</a></li>
			</ol>
		</nav>
	</div>
	<div class="col-md-4" style="text-align:left;margin-top:20px;">
		<!-- 搜索框 -->
		<form action="{{ url('/sku') }}" method='post'   >
			<div class="input-group" style="width:400px;"  >
				{{ csrf_field() }}
				<input  type="text" name='keyword' class="form-control" placeholder="输入sku标题 ...." value="{{ $request or '' }}" style="border-radius:10px 0px 0px 10px;" />
				<span class="input-group-btn">
					<input class="btn btn-success" type="submit" value="Go!" />
					<a class="btn btn-default" href="{{ url('/sku') }}" style="border-radius:0px 10px 10px 0px;" />清空条件</a>
				</span>
			</div>
		</form>
	</div>
	<div class="col-md-4" style="margin-top:60px;">
		<div id="3d" style="margin-left:-100px;" ></div>
	</div>
</div>


<!-- sku表格 -->
<div  class="wrap" style="width:80%;margin-top:2%;" >
    <table class="listtab" >
		<thead>
			<tr>
				<th></th>
				<th style="height:70px;">
					<div class="dummytip dummytip-avatar" style="width:60px;">
						<div class="tooltippp tooltippp-effect-2">
							<a href="{{ url('/addSku') }}" style="text-decoration:none;">
								<h4>sku</h4>
							</a>
							<span class="tooltippp-content" style="margin: 0px 0 -40px -136px;" >点击添加</span>
							<div class="tooltippp-shape" style="margin: 0px 0 -40px -116px;" >
								<svg viewBox="0 0 200 150" preserveAspectRatio="none">
									<polygon points="29.857,3.324 171.111,3.324 196.75,37.671 184.334,107.653 104.355,136.679 100,146.676 96.292,136.355 16.312,107.653 3.25,37.671"/>
								</svg>
							</div>
						</div>
					</div>
				</th>
				<th>封面</th>
				<th>标题</th>
				<th>栏目</th>
				<th>状态</th>
				<th>标价</th>
				<th>会员价</th>
				<th>操作</th>
				<th>上架时间</th>
				<th>负责人</th>
			</tr>
		</thead>
		<tbody>
			@forelse($skus as $sku_info)
				<tr>
					<td></td>
					<td class="group1">
						<div class="roundedOne" style="margin-left:0px;">
							<input type="checkbox" id="{{ $sku_info->id }}" value="{{ $sku_info->id }}" />
							<label for="{{ $sku_info->id }}"  >
							<div style="float:left;margin-left:25px;margin-top:-1px;width:60px;">
							{{ $sku_info->id }}
							</div>
							</label>
						</div>
					</td>
					<td>
						<a href="{{ asset('/addSku') }}/{{ $sku_info->id }}" >
							<img style="height:100px;" src="{{ $sku_info->pic_url }}" />
							@if( $sku_info->is_sold_out==2 )
							<div class="bmbox"  >
								已售罄
							</div>
							@else
							@endif
						</a>
					</td>
					<td>{{ $sku_info->name }}</td>
					<td>{{ $sku_info->category_name }}</td>
					<td>{{ $sku_info->skuStatus }}</td>
					<td>{{ $sku_info->price }}</td>
					<td>{{ $sku_info->vip }}</td>
					<td> 
						<button type="button" onclick="rizhi({{ $sku_info->id }},'{{ $sku_info->name }}');" class="btn btn-primary" data-toggle="modal" data-target="#rizhiModal">
							日志
						</button>
					</td>
					<td>{{ $sku_info->create_at }}</td>
					<td>{{ $sku_info->adminName }}</td>
				</tr>
			@empty
				<tr>
					<td><h2>暂无数据</h2></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			@endforelse
			<tr>
				<td></td>
				<td>
					<label for="allChoose" >
						<input type="checkbox"  value='all' id="allChoose" />全选
					</label>
				</td>
				<td></td>
				<td><a onclick="all_status(1);" style="cursor:pointer;"  >上架</a></td>
				<td><a onclick="all_status(2);" style="cursor:pointer;"  >热卖</a></td>
				<td><a onclick="all_status(3);" style="cursor:pointer;"  >新品</a></td>
				<td><a onclick="all_status(4);" style="cursor:pointer;"  >下架</a></td>
				<td><a onclick="all_status(5);" style="cursor:pointer;"  >售罄</a></td>
				<td><a onclick="all_del()" style="cursor:pointer;" data-toggle="modal" data-target=".bs-example-modal-sm" >删除</a></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
    </table>
</div>


<!-- 分页 -->
<div style='text-align:center;'>
	{{ $skus->appends(['keyword'=>$request])->links() }}
</div>
<div class="badge" style="width:100%;text-align:center;font-size:18px;margin-bottom:70px;" >
		共{{ $skus->total() }}条数据
</div>


<!-- 商品日志模态框 -->
<div class="modal fade" id="rizhiModal" tabindex="-1" role="dialog" aria-labelledby="rizhiModalLabel">
	<div class="modal-dialog" role="document" style="top:10%;" >
		<div class="modal-content">
			
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="rizhiModalLabel"  ></h4>
			</div>
			<div class="modal-body" id="modal-body" style="height:auto;display:block;" >
				
				<!-- class="popover fade right in" -->
				<!-- <div class="arrow" style="top: 50%;"></div> -->
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript" >
	
	
	function allchk()
	{
		// 选项总个数
		var chknum = $(".group1 :checkbox").size();
		var chk = 0;
		$(".group1 :checkbox").each(function ()
		{
			if($(this).prop("checked")==true){
				chk++;
			}
		});
		// 选中的等于总个数
		if( chknum==chk )
		{
			// 全选按钮选中
			$("#allChoose").prop("checked",true);
		}else{
			// 全选按钮 取消选中
			$("#allChoose").prop("checked",false);
		}
	}
	
	
	
	$(function()
	{
		allchk();
		
		//设置全选复选框
		$(".group1 :checkbox").click(function()
		{
			allchk();
		});
		
		// 批量选中
		$('#allChoose').click(function()
		{
			if(this.checked)
			{
				$(".group1 :checkbox").prop("checked", true);
			}else
			{
				$(".group1 :checkbox").prop("checked", false);
			}
		});
		
		
		
	});
	
	
	
</script>
<script src="{{ asset('js/3d.js') }}" language="JavaScript"></script>
<script language="JavaScript">
$(document).ready(function() 
{
	$("#3d").v3dControl({
		imgLength: 26,	//必填
		width: 300,		//插件宽   可填   默认为容器宽  如果不想放大缩小序列图则填写序列图的宽高反之则不填width
		height: 168,	//插件高 可填   默认为容器高  如果不想放大缩小序列图则填写序列图的宽高反之则不填height
		imgPath: "{{ asset('/images/car') }}/",//图片路径  可填  默认img/
		imgType: ".jpg",//图片类型  可填  默认.png
		isAuto: false	//是否自动播放  可填      默认false
	})
})
</script>


@extends('common.footer')
